<!-- Dom模板 -->
<template>
  <div class="Alertbox">
    <!-- Dom内容 -->
    <div class="login_main">
      <div class="top">
        <h1>修改</h1>
      </div>
      <input type="text" placeholder='请输入要修改的内容' v-model="usernum" />
      <button @click="btn()">确认</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      msg: '测试',
      num:"",
      usernum:''
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
        this.num= this.$route.params.key
         console.log(this.num);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      async btn(){
        let {id}=JSON.parse(localStorage.getItem("deng"))
           await axios.post('/api/decet',{id:id,key:this.num,value:this.usernum}).then((res)=>{
           this.$router.push('/edit')
           console.log(res);
           })
        
      }
  }
}
</script>

<style scoped>
.Alertbox {
  background-image: url("../../../../../static/img/13.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.top {
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
h1 {
  color: #ccc;
}
.login_main {
  padding: 0 10px;
  width: 320px;
  height: 400px;
  background: #f1f1f1;
  position: fixed;
  left: 48px;
  bottom: 150px;
}
input {
  width: 250px;
  height: 40px;
  outline: none;
  border: none;
  background: #f1f1f1;
  border-bottom: 1px solid #cccc;
  color: #ccc;
  margin: 10px 0 10px 20px;
}
button {
  width: 250px;
  height: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
  margin: 50px 0 10px 25px;
  background: #ccc;
  outline: none;
  border: none;
  color: red;
  font-weight: 600;
}
p{
  margin-top: 50px;
  margin-left: 150px;
  font-size: 16px;
  border-bottom: 1px solid skyblue;
  color: blue;
}
</style>